<template>
	<div class="header">
		<div class="collapse-btn" @click="changeCollapse">
			<i :class="{'el-icon-s-fold':isCollapse,'el-icon-s-unfold':!isCollapse}"></i>
		</div>
		<div class="sysTitle">
			设计得到业务运营后台管理系统
		</div>
		<div class="header-right">
		            <div class="header-user-con">
		                <!-- 全屏显示 -->
		                <div class="btn-fullscreen" @click="handleFullScreen">
		                    <el-tooltip effect="dark" :content="fullscreen?`取消全屏`:`全屏`" placement="bottom">
		                        <i class="el-icon-rank"></i>
		                    </el-tooltip>
		                </div>
		                <!-- 消息中心 -->
		                <div class="btn-bell">
		                    <el-tooltip
		                        effect="dark"
		                        :content="message?`有${message}条未读消息`:`消息中心`"
		                        placement="bottom"
		                    >
		                        <router-link to="/tab">
		                            <i class="el-icon-bell"></i>
		                        </router-link>
		                    </el-tooltip>
		                    <span class="btn-bell-badge" v-if="message"></span>
		                </div>
						<el-dropdown @command="changeRole" class="right-menu-item hover-effect">
							<span class="el-dropdown-link" id="topRole" style="font-size: 15px">该用户未设置角色</span>
							<i class="el-icon-arrow-down el-icon--right"></i>
							<el-dropdown-menu slot="dropdown" v-if="roleList.length">
							<el-dropdown-item
								:command="item"
								:key="item.id"
								style="height: 40px;font-size: 15px"
								v-for="(item) in roleList"
								v-text="item.roleName + ' - ' +item.companyName"
							></el-dropdown-item>
							</el-dropdown-menu>
						</el-dropdown>
						<!-- 用户头像 -->
		                <div class="user-avator">
		                    <img :src="avatar" />
		                </div>
		                <!-- 用户名下拉菜单 -->
		                <el-dropdown class="user-name" trigger="click" @command="handleCommand">
		                    <span class="el-dropdown-link">
		                        {{name}}
		                        <i class="el-icon-caret-bottom"></i>
		                    </span>
		                    <el-dropdown-menu slot="dropdown">
		                        <a href="javascript:void(0);" @click="$router.push('/personal')">
		                            <el-dropdown-item>个人中心</el-dropdown-item>
		                        </a>
		                        <el-dropdown-item divided command="loginout">退出登录</el-dropdown-item>
		                    </el-dropdown-menu>
		                </el-dropdown>
		            </div>
		</div>
	</div>
</template>

<script>
import { getToken, getItem, removeItem, setItem } from '@/plugins/auth'
import { getUserRoleList } from '@/api/base'

export default {
	props:['isCollapse'],
	data() {
		return {
			fullscreen:false,
			message: 2,
			name: getItem('name'),
			roleList: [],
			avatar: getItem('avatar')
		}
	},
	beforeDestroy () {
		removeItem('menuList')
	},
	methods:{
		getRoleList () {
			let url = `https://kpinterface.shejidedao.cn/interface-server/api/outSystemGetRoleUserList.json?outToken=${getToken()}`
			this.axios(url).then(res => {
				this.roleList = res.body.data.rows
				let role=this.roleList[0];
				const topRole = document.getElementById('topRole')
				topRole.innerText = role.roleName + ' - ' + role.companyName
				setItem('applicationID',role.applicationID)
				setItem('systemDefineID',role.systemDefineID)
			})
		},
		changeRole(role) {
			setItem('applicationID',role.applicationID)
			setItem('systemDefineID',role.systemDefineID)
			let url = `https://kpinterface.shejidedao.cn/interface-server/api/outSystemGetRoleFunctionList.json?outToken=${getToken()}&roleID=${role.roleID}&pageNumber=100000`
			this.axios(url).then(res => {
				setItem('menuList', JSON.stringify(res.body.data.rows))
				this.$router.go(0);
			})
		},
		changeCollapse(){
			this.$emit('Collapse',!this.isCollapse)
		},
		handleCommand(command) {
			if (command == 'loginout') {
				removeItem('userInfo');
				removeItem('ms_username');
				this.$router.push('/login');
			}
		},
		 handleFullScreen() {
			let element = document.documentElement;
			if (this.fullscreen) {
				if (document.exitFullscreen) {
					document.exitFullscreen();
				} else if (document.webkitCancelFullScreen) {
					document.webkitCancelFullScreen();
				} else if (document.mozCancelFullScreen) {
					document.mozCancelFullScreen();
				} else if (document.msExitFullscreen) {
					document.msExitFullscreen();
				}
			} else {
				if (element.requestFullscreen) {
					element.requestFullscreen();
				} else if (element.webkitRequestFullScreen) {
					element.webkitRequestFullScreen();
				} else if (element.mozRequestFullScreen) {
					element.mozRequestFullScreen();
				} else if (element.msRequestFullscreen) {
					// IE11
					element.msRequestFullscreen();
				}
			}
			this.fullscreen = !this.fullscreen;
	}
	},
	mounted() {
		this.getRoleList()
	}
}
</script>

<style lang="stylus">
	.header
		width 100%
		height 70px
		position fixed
		z-index 999
		background #242f42
	
	a
		text-decoration none
		
	.collapse-btn
		cursor pointer
		font-size 25px
		height 100%
		float left
		padding 0 21px
		line-height 70px
		color #fff
		
	.collapse-btn:hover
		background rgba(255,255,255,.3)
		
	.sysTitle
		color #fff
		line-height 70px
		font-size 22px
		float left
		font-weight bold
	
	.header-right {
	    float: right;
	    padding-right: 50px;
		color #fff
	}
	
	.header-user-con {
	    display: flex;
	    height: 70px;
	    align-items: center;
	}
	
	.btn-fullscreen {
	    transform: rotate(45deg);
	    margin-right: 5px;
	    font-size: 24px;
	}
	
	.btn-bell,.btn-fullscreen {
	    position: relative;
	    width: 30px;
	    height: 30px;
	    text-align: center;
	    border-radius: 15px;
	    cursor: pointer;
	}
	
	.btn-bell-badge {
	    position: absolute;
	    right: 0;
	    top: -2px;
	    width: 8px;
	    height: 8px;
	    border-radius: 4px;
	    background: #f56c6c;
	    color: #fff;
	}
	
	.btn-bell .el-icon-bell {
	    color: #fff;
	}
	.btn-bell {
		font-size 22px
	}
	.user-name {
	    margin-left: 10px;
	}
	.user-avator {
	    margin-left: 20px;
	}
	.user-avator img {
	    display: block;
	    width: 40px;
	    height: 40px;
	    border-radius: 50%;
	}
	.el-dropdown-link {
	    color: #fff;
	    cursor: pointer;
	}
	.el-dropdown-menu__item {
	    text-align: center;
	}
	
</style>
<style lang="scss" scoped>
	.right-menu-item {
      display: inline-block;
      padding-left: 16px;
      font-size: 18px;
      color: #5a5e66;
      vertical-align: text-bottom;

      &.hover-effect {
        cursor: pointer;
        transition: background .3s;

        &:hover {
          background: rgba(0, 0, 0, .025)
        }
      }
    }
</style>